<template>
    <div class="stbh">
        <div id="mapDiv" class="mapDiv"></div>
        <el-dialog title="" :visible.sync="dialogTableVisible" style="z-index: 99999">
            <!-- sadasfsdfdsafbbbbbbbbbbbbbbbbbbbbbbbbbb -->
            <img :src="imgurl" alt="" style="width: 100%" />
        </el-dialog>
        <div id="one" class="zoology" @click="dialog111">
            <i class="iconfont iconfangxiang" style="font-size: 20px"></i>
            <div>基地</div>
        </div>
        <div class="zoology1">
            <div
                id="two"
                style="
                    display: inline-block;
                    width: 69px;
                    text-align: center;
                    border-right: 1px solid #aaa;
                    border-top-left-radius: 6px;
                    border-bottom-left-radius: 6px;
                "
                @click="farmarea"
            >
                <i class="iconfont icondikuai" style="font-size: 20px"></i>
                <div>地块</div>
            </div>
            <div id="three" style="display: inline-block; width: 60px; text-align: center; border-right: 1px solid #aaa" @click="warehouse">
                <i class="iconfont iconcangku" style="font-size: 20px"></i>
                <div>仓库</div>
            </div>
            <div
                id="four"
                style="
                    display: inline-block;
                    width: 68px;
                    text-align: center;
                    border-top-right-radius: 6px;
                    border-bottom-right-radius: 6px;
                "
                @click="architecture"
            >
                <i class="iconfont iconjianzhu" style="font-size: 20px"></i>
                <div>建筑</div>
            </div>
        </div>
        <div class="zoology2">
            <div
                id="five"
                style="
                    display: inline-block;
                    width: 100px;
                    text-align: center;
                    border-right: 1px solid #aaa;
                    border-top-left-radius: 6px;
                    border-bottom-left-radius: 6px;
                "
                @click="weather"
            >
                <i class="iconfont iconsheshidu" style="font-size: 20px"></i>
                <div>气象传感</div>
            </div>
            <div id="six" style="display: inline-block; width: 98px; text-align: center; border-right: 1px solid #aaa" @click="camera">
                <i class="iconfont iconshexiangtou" style="font-size: 20px"></i>
                <div>摄像头</div>
            </div>
            <div
                id="seven"
                style="
                    display: inline-block;
                    width: 99px;
                    text-align: center;
                    border-top-right-radius: 6px;
                    border-bottom-right-radius: 6px;
                "
                @click="panoramagram"
            >
                <i class="iconfont iconquanjingtu" style="font-size: 20px"></i>
                <div>全景图</div>
            </div>
        </div>
        <div class="address">
            <input
                v-model="addressname"
                style="border: none; border-right: 1px solid #aaa; outline: none"
                class="addressinput"
                placeholder="请输入搜索地址"
            />
            <span class="addressspan" style="text-align: center; margin-left: 4px; cursor: pointer" @click="sousuo">搜索</span>
        </div>
        <el-drawer :before-close="handleClose" :visible.sync="dialog" direction="rtl" custom-class="drawer" ref="drawer">
            <div class="demo-drawer__content">
                <el-form :model="form" class="margin-left" label-width="80px" v-if="ruleForm.type == 1">
                    <div class="hnk jgxx">基地信息</div>
                    <el-form-item label="基地名称" style="margin-top: 20px">
                        <el-input v-model="ruleForm.name" autocomplete="off" style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="面积">
                        <el-input v-model="ruleForm.area" autocomplete="off" style="width: 150px"></el-input>
                        <span style="margin-left: 10px">亩</span>
                    </el-form-item>
                    <el-form-item label="颜色">
                        <div class="block">
                            <el-color-picker v-model="ruleForm.color"></el-color-picker>
                        </div>
                    </el-form-item>
                    <el-form-item label="透明度">
                        <div class="block">
                            <!-- <span class="demonstration">默认</span> -->
                            <el-col :span="7">
                                <el-slider v-model="ruleForm.diaphaneity" style="width: 120px"></el-slider>
                            </el-col>
                            <el-col :span="12">
                                <el-input style="width: 50px" v-model="ruleForm.diaphaneity" disabled="disabled"></el-input>
                            </el-col>
                        </div>
                    </el-form-item>
                </el-form>
                <el-form :model="form" class="margin-left" label-width="80px" v-if="ruleForm.type == 2">
                    <div class="hnk jgxx">地块信息</div>
                    <el-form-item label="地块名称">
                        <el-input v-model="ruleForm.name" autocomplete="off" style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="面积">
                        <el-input v-model="ruleForm.area" autocomplete="off" style="width: 150px"></el-input>
                        <span style="margin-left: 10px">亩</span>
                    </el-form-item>
                    <el-form-item label="坐标">
                        <div v-for="(item, index) in lnglat" :key="index">
                            <el-input v-model="item.lat" autocomplete="off" style="width: 100px; margin: 0 5px 5px 0"></el-input>
                            <el-input v-model="item.lng" autocomplete="off" style="width: 100px"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="颜色">
                        <div class="block">
                            <el-color-picker v-model="ruleForm.color"></el-color-picker>
                        </div>
                    </el-form-item>
                    <el-form-item label="透明度">
                        <div class="block">
                            <el-col :span="7">
                                <el-slider v-model="ruleForm.diaphaneity" style="width: 120px"></el-slider>
                            </el-col>
                            <el-col :span="12">
                                <el-input style="width: 50px" v-model="ruleForm.diaphaneity" disabled="disabled"></el-input>
                            </el-col>
                        </div>
                    </el-form-item>
                    <div class="hnk jgxx">人员信息</div>
                    <el-form-item label="农户：">
                        <template>
                            <el-select
                                v-model="peasantId"
                                @change="choosePrincipal"
                                value-key="id"
                                style="width: 300px"
                                placeholder="请选择"
                            >
                                <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item"></el-option>
                            </el-select>
                        </template>
                    </el-form-item>
                    <el-form-item label="管理员：" style="margin-bottom: 80px">
                        <template>
                            <el-select
                                v-model="principalId"
                                @change="choosePrincipal1"
                                value-key="id"
                                style="width: 300px"
                                placeholder="请选择"
                            >
                                <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item"></el-option>
                            </el-select>
                        </template>
                    </el-form-item>
                </el-form>

                <el-form :model="form" class="margin-left" label-width="80px" v-if="ruleForm.type == 3">
                    <div class="hnk jgxx">仓库信息</div>
                    <el-form-item label="仓库名称">
                        <el-input v-model="ruleForm.name" autocomplete="off" style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="面积">
                        <el-input v-model="ruleForm.area" autocomplete="off" style="width: 150px"></el-input>
                        <span style="margin-left: 10px">亩</span>
                    </el-form-item>
                    <el-form-item label="坐标">
                        <div v-for="(item, index) in lnglat" :key="index">
                            <el-input v-model="item.lat" autocomplete="off" style="width: 100px; margin: 0 5px 5px 0"></el-input>
                            <el-input v-model="item.lng" autocomplete="off" style="width: 100px"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="颜色">
                        <div class="block">
                            <el-color-picker v-model="ruleForm.color"></el-color-picker>
                        </div>
                    </el-form-item>
                    <el-form-item label="透明度">
                        <div class="block">
                            <el-col :span="7">
                                <el-slider v-model="ruleForm.diaphaneity" style="width: 120px"></el-slider>
                            </el-col>
                            <el-col :span="12">
                                <el-input style="width: 50px" v-model="ruleForm.diaphaneity" disabled="disabled"></el-input>
                            </el-col>
                        </div>
                    </el-form-item>
                    <div class="hnk jgxx">人员管理</div>
                    <el-form-item label="管理员：">
                        <template>
                            <el-select
                                v-model="principalId"
                                @change="choosePrincipal1"
                                value-key="id"
                                style="width: 300px"
                                placeholder="请选择"
                            >
                                <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item"></el-option>
                            </el-select>
                        </template>
                    </el-form-item>
                    <div class="hnk jgxx">设置分区</div>
                    <div v-for="(item, index) in position" :key="index">
                        <el-form-item label="仓位名称">
                            <el-input v-model="item.name" autocomplete="off" style="width: 150px"></el-input>
                        </el-form-item>
                    </div>
                    <div style="margin: 0 0 80px 10px">
                        <el-button @click="addposition">添加仓位</el-button>
                        <el-button @click="deleteposition">删除仓位</el-button>
                    </div>
                </el-form>

                <el-form :model="form" class="margin-left" label-width="80px" v-if="ruleForm.type == 4">
                    <div class="hnk jgxx">建筑信息</div>
                    <el-form-item label="建筑名称">
                        <el-input v-model="ruleForm.name" autocomplete="off" style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="面积">
                        <el-input v-model="ruleForm.area" autocomplete="off" style="width: 150px"></el-input>
                        <span style="margin-left: 10px">亩</span>
                    </el-form-item>
                    <el-form-item label="坐标">
                        <div v-for="(item, index) in lnglat" :key="index">
                            <el-input v-model="item.lat" autocomplete="off" style="width: 100px; margin: 0 5px 5px 0"></el-input>
                            <el-input v-model="item.lng" autocomplete="off" style="width: 100px"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="颜色">
                        <div class="block">
                            <el-color-picker v-model="ruleForm.color"></el-color-picker>
                        </div>
                    </el-form-item>
                    <el-form-item label="透明度">
                        <div class="block">
                            <el-col :span="7">
                                <el-slider v-model="ruleForm.diaphaneity" style="width: 120px"></el-slider>
                            </el-col>
                            <el-col :span="12">
                                <el-input style="width: 50px" v-model="ruleForm.diaphaneity" disabled="disabled"></el-input>
                            </el-col>
                        </div>
                    </el-form-item>
                </el-form>

                <!-- 全景图 -->
                <el-form :model="form" class="margin-left" label-width="100px" v-if="ruleForm.type == 5">
                    <el-form-item label="名称">
                        <el-input v-model="ruleForm.name" autocomplete="off" style="width: 200px"></el-input>
                    </el-form-item>
                    <el-form-item label="照片上传：">
                        <el-upload
                            class="upload-poster"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :show-file-list="false"
                            :on-change="imgPreview"
                            :auto-upload="false"
                        >
                            <img v-if="soilImg" :src="soilImg" class="avatar" />
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload
                        >jpg、png、gif格式，60x60像素，不超过2MB
                    </el-form-item>
                    <el-form-item label="拍摄时间：">
                        <el-date-picker
                            v-model="ruleForm.imgTime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="请选择"
                            style="width: 200px"
                        ></el-date-picker>
                    </el-form-item>
                </el-form>

                <!--  气象传感  -->
                <el-form :model="form" class="margin-left" label-width="120px" v-if="ruleForm.type == 6">
                    <el-form-item label="设备名称：">
                        <template>
                            <el-select
                                v-model="equipmentIds"
                                @change="choosePrincipal1"
                                value-key="id"
                                style="width: 200px"
                                placeholder="请选择"
                            >
                                <el-option v-for="item in shebeilist" :key="item.id" :label="item.name" :value="item"></el-option>
                            </el-select>
                        </template>
                    </el-form-item>
                </el-form>
                <!-- 摄像头 -->
                <el-form :model="form" class="margin-left" label-width="120px" v-if="ruleForm.type == 7">
                    <el-form-item label="设备名称：">
                        <template>
                            <!-- <el-select
					            v-model="principalId"
								@change="choosePrincipal1"
								value-key="id"
								style="width:200px"
								placeholder="请选择"
							> -->
                            <el-select
                                v-model="equipmentIds"
                                @change="choosePrincipal1"
                                value-key="id"
                                style="width: 200px"
                                placeholder="请选择"
                            >
                                <el-option v-for="item in sxtList" :key="item.id" :label="item.name" :value="item"></el-option>
                            </el-select>
                        </template>
                    </el-form-item>
                </el-form>

                <!-- <el-dialog title="" :visible.sync="dialogTableVisible" style="z-index:99999;">
				    sadasfsdfdsafbbbbbbbbbbbbbbbbbbbbbbbbbb
				</el-dialog> -->

                <!--<div class="lu hnk"></div><div class="hnk jgxx">经纬度坐标</div>
				<div v-for="(item,index) in lnglat" :key="index" style="margin-bottom:50px;">
					<el-form ref="form" :model="form" class="margin-left">
						<el-row :gutter="20" style="margin-top:5px;">
							<el-col :span="10" >
								<el-form-item label="经度" style="width:40px;">
									<el-input class="handle-input" placeholder="" v-model="item.lng" style="width:150px;"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="10" >
								<el-form-item label="纬度" style="width:40px;">
									<el-input class="handle-input" placeholder="" v-model="item.lat" style="width:150px;"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div> -->
                <!-- <el-button type="success" @click="addListRow" style="margin:0 0 50px 20px;">新增坐标</el-button> -->
                <div class="footerFixed" style="margin-bottom: 20px; box-shadow: 0 -1px 1px 1px #aaa; padding-left: 20px">
                    <el-button @click="cancelForm">取 消</el-button>
                    <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{
                        loading ? '提交中 ...' : '确 定'
                    }}</el-button>
                </div>
            </div>
        </el-drawer>
		<!--<div style="width:500px;height:400px;position: absolute;border:1px solid red;">
			<video id="myPlayer"   ref="videoplay" controls playsInline webkit-playsinline style="width:500px;height:400px;position:absolute; top:50px;">
				<source ref="videoplay" src="https://hls01open.ys7.com/openlive/4cd828c7dbcb4a448835eebb51591748.m3u8" type="application/x-mpegURL" />
			</video>
		</div>-->
    </div>

</template>

<script>
import { map_save, map_findByList, soil_bind } from '@/request/breedApi.js';
import { user_findByAll, equipment_findByType, base_details, warehouse_listpart, warehouse_tree } from '@/request/api';
import { ElMessage } from '../../../../request/norepeat.js';
import BaiduMap from '../../../common/js';
import axios from "axios"
export default {
    inject: ['reload'],
    data() {
        return {
			videoFlag: false,  //视频播放层flag
			// videoFlag: false,  //视频播放层flag
            equipmentIds: '',
            imgurl: '',
            dialogTableVisible: false,
            disabled: true,
            shebeilist: '',
            principalId: '',
            peasantId: '',
            soilImg: '',
            opactity: 0,
            name: '',
            area: '',
            lnglat: [
                {
                    //坐标
                    lng: '',
                    lat: ''
                }
            ],

            addressname: '',
            color1: '#409EFF',
            polygonTool: '',
            zoom: '11',
            points: [],
            line: '',
            T: '',
            lay: '',
            map: '',
            drivingRoute: '',
            // _CarTrack: '',
            onDrawPolygon: '',
            config: '',
            iconMaker: [],
            dialog: false,
            loading: false,
            // 104.084439,30.631234
            // latitude:30.631234,
            latitude: '',
            // longtitude:104.084439,
            longtitude: '',
            form: {},
            formLabelWidth: '80px',
            timer: null,
            list: '',
            urllist: '',
            dikuailists: '',
            localsearch: '',
            localSearchResult: '',
            geocoder: '',
            marker: '',
            zhongxin: '',
            lng: '',
            lat: '',
            polygon: '',
            polygonclick: '',
            markerTool: '',
            ruleForm: {
                type: '',
                color: '#409EFF',
                diaphaneity: 60
            },
            position: [
                {
                    //仓位
                    name: ''
                }
            ],
            userList: [],
            mapList: [],
            type: '',
            details: {},
            baseList: [],
            sxtList: [],
            jdzb: [], //基地坐标
            dkzb: [], //地块
            navigator: '',
            cangweiData: ''
        };
    },
    created() {
        // if(location.href.indexOf('#reloaded')==-1){
        // 	location.href=location.href+"#reloaded";
        // }
    },
    mounted() {
        // this.type = this.$route.query.type
        // if(this.$route.query.type) this.type = this.$route.query.type
        if (this.$route.query.id) {
            var jsid = this.$route.query.id;
            base_details(jsid).then((res) => {
                this.lnglat = JSON.parse(res.data.coordinate);
                this.ruleForm = res.data;
                this.peasantId = res.data.peasantName;
                this.principalId = res.data.principalName;
                this.ruleForm.diaphaneity = Number(res.data.diaphaneity);
            });
            this.dialog = this.$route.query.isshow;
        }
        setTimeout(this.getshuju(), 1000);
		setTimeout(this.init(), 1000);
		setTimeout(this.getshebei(), 1000);
        // this.init();
        // this.getshebei();
        // console.log(this.ruleForm.position)
    },
    methods: {
        //判断点是否在另一平面图中
        pddm(point, polygon) {
            var N = polygon.length;
            var boundOrVertex = true; //如果点位于多边形的顶点或边上，也算做点在多边形内，直接返回true
            var intersectCount = 0; //cross points count of x
            var precision = 2e-10; //浮点类型计算时候与0比较时候的容差
            var p1, p2; //neighbour bound vertices
            var p = point; //测试点
            // var p = point[0]; //测试点
            // console.log(p,'测试点')

            p1 = polygon[0]; //left vertex
            for (var i = 1; i <= N; ++i) {
                //check all rays
                if (p.lat == p1.lat && p.lng == p1.lng) {
                    return boundOrVertex; //p is an vertex
                }

                p2 = polygon[i % N]; //right vertex
                if (p.lng < Math.min(p1.lng, p2.lng) || p.lng > Math.max(p1.lng, p2.lng)) {
                    //ray is outside of our interests
                    p1 = p2;
                    continue; //next ray left point
                }
                if (p.lng > Math.min(p1.lng, p2.lng) && p.lng < Math.max(p1.lng, p2.lng)) {
                    //ray is crossing over by the algorithm (common part of)
                    if (p.lat <= Math.max(p1.lat, p2.lat)) {
                        //x is before of ray
                        if (p1.lng == p2.lng && p.lat >= Math.min(p1.lat, p2.lat)) {
                            //overlies on a horizontal ray
                            return boundOrVertex;
                        }
                        if (p1.lat == p2.lat) {
                            //ray is vertical
                            if (p1.lat == p.lat) {
                                //overlies on a vertical ray
                                return boundOrVertex;
                            } else {
                                //before ray
                                ++intersectCount;
                            }
                        } else {
                            //cross point on the left side
                            var xinters = ((p.lng - p1.lng) * (p2.lat - p1.lat)) / (p2.lng - p1.lng) + p1.lat; //cross point of x
                            if (Math.abs(p.lat - xinters) < precision) {
                                //overlies on a ray
                                return boundOrVertex;
                            }
                            if (p.lat < xinters) {
                                //before ray
                                ++intersectCount;
                            }
                        }
                    }
                } else {
                    //special case when ray is crossing through the vertex
                    if (p.lng == p2.lng && p.lat <= p2.lat) {
                        //p crossing over p2
                        var p3 = polygon[(i + 1) % N]; //next vertex
                        if (p.lng >= Math.min(p1.lng, p3.lng) && p.lng <= Math.max(p1.lng, p3.lng)) {
                            //p.y lies between p1.y & p3.y
                            ++intersectCount;
                        } else {
                            intersectCount += 2;
                        }
                    }
                }
                p1 = p2;
            }
            if (intersectCount % 2 == 0) {
                //偶数在多边形外
                return false;
                // this.flag = false
            } else {
                //奇数在多边形内
                return true;
                // this.flag = true
            }
        },

        //判断两多边形是否存在点与区域的包含关系(A的点在B的区域内或B的点在A的区域内)
        pddbx(plyA, plyB) {
            let [a, b] = [false, false];
            a = plyA.some((item) => this.pddm(item, plyB));
            if (!a) {
                b = plyB.some((item) => this.pddm(item, plyA));
            }
            // return a || b;
            // this.flag1 = (a || b)
            // console.log(a || b )
        },

        getshebei() {
            var data = {
                type: '摄像头'
            };
            equipment_findByType(data).then((res) => {
                this.sxtList = res.data;
            });
            var datas = {
                type: '气象传感'
            };
            equipment_findByType(datas).then((res) => {
                this.shebeilist = res.data;
            });
        },
        imgPreview(file, fileList) {
            this.soilImg = URL.createObjectURL(file.raw);
            let fileName = file.name;
            let regex = /(.jpg|.gif|.png|.jpeg)$/;
            if (regex.test(fileName.toLowerCase())) {
                this.ruleForm.files = file.raw;
                this.ruleForm.soilImg = file.name;
            } else {
                this.$message.error('请选择图片文件');
            }
        },
        choosePrincipal(ele) {
            this.ruleForm.peasantId = ele.id;
            this.ruleForm.peasantName = ele.name;
        },
        choosePrincipal1(ele) {
            this.ruleForm.principalId = ele.id;
            this.ruleForm.principalName = ele.name;
            this.ruleForm.equType = ele.type;
        },
        init() {
            user_findByAll('').then((res) => {
                this.userList = res.data;
            });
            warehouse_tree('').then((res) => {
                console.log(res);
            });
        },
        formatTooltip(val) {
            return val / 100;
        },
        //添加仓位
        addposition() {
            // console.log(this.ruleForm);
			// console.log(this.position)
            this.position.push({
                name: ''
            });
        },
        //删除仓位
        deleteposition() {
            this.position.pop();
        },
        //地块
        farmarea(e) {
            // var _this =this
            // for(var i =0;i<_this.baseList.length;i++){
            // 	var con = JSON.parse(_this.baseList[i].coordinate)
            // 	_this.polygon = new T.Polygon(con, { color: _this.baseList[i].color,fillOpacity:_this.baseList[i].diaphaneity/100,details:_this.baseList[i] })
            // 	_this.map.addOverLay(this.polygon)
            // 	_this.polygon.addEventListener("mouseup",function get(e){
            // 		console.log(e)
            // 	})
            // }
            var obj = document.getElementById('two');
            obj.style.color = '#409EFF';

            var obj = document.getElementById('one');
            obj.style.color = 'black';

            var obj = document.getElementById('three');
            obj.style.color = 'black';
            var obj = document.getElementById('four');
            obj.style.color = 'black';
            var obj = document.getElementById('five');
            obj.style.color = 'black';
            var obj = document.getElementById('six');
            obj.style.color = 'black';
            var obj = document.getElementById('seven');
            obj.style.color = 'black';
            this.ruleForm.type = 2;
            this.ruleForm.pid = this.baseList[0].id;
            var _this = this;

            this.polygonTool.open();
            this.markerTool.close();
            this.polygonTool.addEventListener('draw', function huoqu(e) {
                var area = (e.currentArea / 1000 / 1000) * 1500;
                _this.ruleForm.area = area.toFixed(2);
                var list = e.currentLnglats;
                var s = JSON.stringify(list);
                localStorage.setItem('list', s);
                _this.lnglat = JSON.parse(s);
                _this.dialog = true;
            });
            this.polygonTool.addEventListener('addpoint', function huoqu1(e) {
                var dian = e.currentLnglats.slice(e.currentLnglats.length - 1)[0];
                let Message = new ElMessage();
                if (_this.pddm(dian, _this.jdzb) == false) {
                    _this.polygonTool.close();
                    var obj = document.getElementById('two');
                    obj.style.color = 'black';
                    // _this.$notify({
                    // 	title: '提示',
                    // 	message: '新增地块必须在基地内',
                    // 	type: 'info',
                    // 	duration:1000
                    // });
                    Message.info('新增地块必须在基地内');
                } else {
                    for (var i = 0; i < _this.dkzb.length; i++) {
                        // console.log(_this.pddm(dian,_this.dkzb[i]),'每次新增点判定结果，false为在现有地块外')
                        if (_this.pddm(dian, _this.dkzb[i])) {
                            _this.polygonTool.close();
                            var obj = document.getElementById('two');
                            obj.style.color = 'black';
                            // _this.$notify({
                            // 	title: '提示',
                            // 	message: '新增地块不能与已有地块重叠',
                            // 	type: 'info',
                            // 	duration:1000
                            // });
                            Message.info('新增地块不能与已有地块重叠');
                        } else {
                            for (var s = 0; s < _this.dkzb[i].length; s++) {
                                // console.log(_this.pddm(_this.dkzb[i][s],e.currentLnglats),'新增地块点的判断结果,true为地块包含新增点')
                                if (_this.pddm(_this.dkzb[i][s], e.currentLnglats)) {
                                    _this.polygonTool.close();
                                    var obj = document.getElementById('two');
                                    obj.style.color = 'black';
                                    // _this.$notify({
                                    // 	title: '提示',
                                    // 	message: '新增地块不能与已有地块重叠',
                                    // 	type: 'info',
                                    // 	duration:1000
                                    // });
                                    Message.info('新增地块不能与已有地块重叠');
                                }
                            }
                        }
                    }
                }
            });
            // })
        },
        //仓库
        warehouse() {
            var obj = document.getElementById('three');
            obj.style.color = '#409EFF';
            var obj = document.getElementById('one');
            obj.style.color = 'black';
            var obj = document.getElementById('two');
            obj.style.color = 'black';
            var obj = document.getElementById('four');
            obj.style.color = 'black';
            var obj = document.getElementById('five');
            obj.style.color = 'black';
            var obj = document.getElementById('six');
            obj.style.color = 'black';
            var obj = document.getElementById('seven');
            obj.style.color = 'black';
            this.ruleForm.type = 3;
            this.ruleForm.pid = this.baseList[0].id;
            var _this = this;
            // this.map.clearOverLays();
            this.polygonTool.open();
            this.markerTool.close();
            this.polygonTool.addEventListener('draw', function huoqu(e) {
                // console.log(e.currentArea/1000/1000*1500)
                var area = (e.currentArea / 1000 / 1000) * 1500;
                _this.ruleForm.area = area.toFixed(2);
                var list = e.currentLnglats;
                var s = JSON.stringify(list);
                localStorage.setItem('list', s);
                _this.lnglat = JSON.parse(s);
                _this.dialog = true;
            });
            this.polygonTool.addEventListener('addpoint', function huoqu1(e) {
                var dian = e.currentLnglats.slice(e.currentLnglats.length - 1)[0];
                let Message = new ElMessage();
                if (_this.pddm(dian, _this.jdzb) == false) {
                    _this.polygonTool.close();
                    var obj = document.getElementById('three');
                    obj.style.color = 'black';
                    // _this.$notify({
                    // 	title: '提示',
                    // 	message: '新增仓库必须在基地内',
                    // 	type: 'info',
                    // 	duration:1000
                    // });
                    Message.info('新增仓库必须在基地内');
                } else {
                    for (var i = 0; i < _this.dkzb.length; i++) {
                        // console.log(_this.pddm(dian,_this.dkzb[i]),'每次新增点判定结果，false为在现有地块外')
                        if (_this.pddm(dian, _this.dkzb[i])) {
                            _this.polygonTool.close();
                            var obj = document.getElementById('three');
                            obj.style.color = 'black';
                            // _this.$notify({
                            // 	title: '提示',
                            // 	message: '新增仓库不能与已有地块重叠',
                            // 	type: 'info',
                            // 	duration:1000
                            // });
                            Message.info('新增仓库不能与已有地块重叠');
                        } else {
                            for (var s = 0; s < _this.dkzb[i].length; s++) {
                                // console.log(_this.pddm(_this.dkzb[i][s],e.currentLnglats),'新增地块点的判断结果,true为地块包含新增点')
                                if (_this.pddm(_this.dkzb[i][s], e.currentLnglats)) {
                                    _this.polygonTool.close();
                                    var obj = document.getElementById('three');
                                    obj.style.color = 'black';
                                    // _this.$notify({
                                    // 	title: '提示',
                                    // 	message: '新增仓库不能与已有地块重叠',
                                    // 	type: 'info',
                                    // 	duration:1000
                                    // });
                                    Message.info('新增仓库不能与已有地块重叠');
                                }
                            }
                        }
                    }
                }
            });
        },
        //建筑
        architecture() {
            var obj = document.getElementById('four');
            obj.style.color = '#409EFF';
            var obj = document.getElementById('one');
            obj.style.color = 'black';
            var obj = document.getElementById('two');
            obj.style.color = 'black';
            var obj = document.getElementById('three');
            obj.style.color = 'black';

            var obj = document.getElementById('five');
            obj.style.color = 'black';
            var obj = document.getElementById('six');
            obj.style.color = 'black';
            var obj = document.getElementById('seven');
            obj.style.color = 'black';
            this.ruleForm.type = 4;
            this.ruleForm.pid = this.baseList[0].id;
            var _this = this;
            // this.map.clearOverLays();
            this.polygonTool.open();
            this.markerTool.close();
            this.polygonTool.addEventListener('draw', function huoqu(e) {
                // console.log(e.currentArea/1000/1000*1500)
                var area = (e.currentArea / 1000 / 1000) * 1500;
                _this.ruleForm.area = area.toFixed(2);
                var list = e.currentLnglats;
                var s = JSON.stringify(list);
                localStorage.setItem('list', s);
                _this.lnglat = JSON.parse(s);
                _this.dialog = true;
            });
            //添加建筑每次点击地图
            this.polygonTool.addEventListener('addpoint', function huoqu1(e) {
                var dian = e.currentLnglats.slice(e.currentLnglats.length - 1)[0];
                let Message = new ElMessage();
                if (_this.pddm(dian, _this.jdzb) == false) {
                    _this.polygonTool.close();
                    var obj = document.getElementById('four');
                    obj.style.color = 'black';
                    // _this.$notify({
                    // 	title: '提示',
                    // 	message: '新增仓库必须在基地内',
                    // 	type: 'info',
                    // 	duration:1000
                    // });
                    Message.info('新增建筑必须在基地内');
                } else {
                    for (var i = 0; i < _this.dkzb.length; i++) {
                        // console.log(_this.pddm(dian,_this.dkzb[i]),'每次新增点判定结果，false为在现有地块外')
                        if (_this.pddm(dian, _this.dkzb[i])) {
                            _this.polygonTool.close();
                            var obj = document.getElementById('four');
                            obj.style.color = 'black';
                            // _this.$notify({
                            // 	title: '提示',
                            // 	message: '新增仓库不能与已有地块重叠',
                            // 	type: 'info',
                            // 	duration:1000
                            // });
                            Message.info('新增建筑不能与已有地块重叠');
                        } else {
                            for (var s = 0; s < _this.dkzb[i].length; s++) {
                                // console.log(_this.pddm(_this.dkzb[i][s],e.currentLnglats),'新增地块点的判断结果,true为地块包含新增点')
                                if (_this.pddm(_this.dkzb[i][s], e.currentLnglats)) {
                                    _this.polygonTool.close();
                                    var obj = document.getElementById('four');
                                    obj.style.color = 'black';
                                    // _this.$notify({
                                    // 	title: '提示',
                                    // 	message: '新增仓库不能与已有地块重叠',
                                    // 	type: 'info',
                                    // 	duration:1000
                                    // });
                                    Message.info('新增建筑不能与已有地块重叠');
                                }
                            }
                        }
                    }
                }
            });
        },
        // 气象传感
        weather() {
            var obj = document.getElementById('five');
            obj.style.color = '#409EFF';
            var obj = document.getElementById('one');
            obj.style.color = 'black';
            var obj = document.getElementById('two');
            obj.style.color = 'black';
            var obj = document.getElementById('three');
            obj.style.color = 'black';
            var obj = document.getElementById('four');
            obj.style.color = 'black';

            var obj = document.getElementById('six');
            obj.style.color = 'black';
            var obj = document.getElementById('seven');
            obj.style.color = 'black';
            this.ruleForm.type = 6;
            this.ruleForm.pid = this.baseList[0].id;
            var _this = this;
            this.markerTool.open();
            this.polygonTool.close();
            this.markerTool.addEventListener('mouseup', function get(e) {
                // _this.markerTool.clear()
                // console.log(e.currentLnglats)
                // var list = e.currentLnglat
                // var s = JSON.stringify(list)
                // localStorage.setItem("list",s)
                // _this.dialog = true
                let dian = e.currentLnglat;
                let Message = new ElMessage();
                if (_this.pddm(dian, _this.jdzb) == false) {
                    _this.markerTool.clear();
                    var obj = document.getElementById('five');
                    obj.style.color = 'black';
                    // _this.$notify({
                    // 	title: '提示',
                    // 	message: '新增仓库必须在基地内',
                    // 	type: 'info',
                    // 	duration:1000
                    // });
                    Message.info('新增气象传感必须在基地内');
                } else {
                    var qxflag = false;
                    for (var i = 0; i < _this.dkzb.length; i++) {
                        // console.log(_this.pddm(dian,_this.dkzb[i]),'每次新增点判定结果，false为在现有地块外')
                        if (_this.pddm(dian, _this.dkzb[i])) {
                            qxflag = true;
                        }
                    }
                    if (qxflag === false) {
                        _this.markerTool.clear();
                        var obj = document.getElementById('five');
                        obj.style.color = 'black';
                        // _this.$notify({
                        // 	title: '提示',
                        // 	message: '新增仓库不能与已有地块重叠',
                        // 	type: 'info',
                        // 	duration:1000
                        // });
                        Message.info('新增气象传感必须在地块、仓库或建筑上');
                    } else {
                        var list = e.currentLnglat;
                        var s = JSON.stringify(list);
                        localStorage.setItem('list', s);
                        _this.lnglat = JSON.parse(s);
                        _this.dialog = true;
                    }
                }
            });
        },
        //摄像头
        camera() {
            var obj = document.getElementById('six');
            obj.style.color = '#409EFF';
            var obj = document.getElementById('one');
            obj.style.color = 'black';
            var obj = document.getElementById('two');
            obj.style.color = 'black';
            var obj = document.getElementById('three');
            obj.style.color = 'black';
            var obj = document.getElementById('four');
            obj.style.color = 'black';
            var obj = document.getElementById('five');
            obj.style.color = 'black';
            var obj = document.getElementById('seven');
            obj.style.color = 'black';
            this.ruleForm.type = 7;
            this.ruleForm.pid = this.baseList[0].id;
            var _this = this;
            this.markerTool.open();
            this.polygonTool.close();
            this.markerTool.addEventListener('mouseup', function get(e) {
                // var list = e.currentLnglat
                // var s = JSON.stringify(list)
                // localStorage.setItem("list",s)
                // _this.dialog = true
                let dian = e.currentLnglat;
                let Message = new ElMessage();
                if (_this.pddm(dian, _this.jdzb) == false) {
                    _this.markerTool.clear();
                    var obj = document.getElementById('six');
                    obj.style.color = 'black';
                    // _this.$notify({
                    // 	title: '提示',
                    // 	message: '新增仓库必须在基地内',
                    // 	type: 'info',
                    // 	duration:1000
                    // });
                    Message.info('新增摄像头必须在基地内');
                } else {
                    var qxflag = false;
                    for (var i = 0; i < _this.dkzb.length; i++) {
                        // console.log(_this.pddm(dian,_this.dkzb[i]),'每次新增点判定结果，false为在现有地块外')
                        if (_this.pddm(dian, _this.dkzb[i])) {
                            qxflag = true;
                        }
                    }
                    if (qxflag === false) {
                        _this.markerTool.clear();
                        var obj = document.getElementById('six');
                        obj.style.color = 'black';
                        // _this.$notify({
                        // 	title: '提示',
                        // 	message: '新增仓库不能与已有地块重叠',
                        // 	type: 'info',
                        // 	duration:1000
                        // });
                        Message.info('新增摄像头必须在地块、仓库或建筑上');
                    } else {
                        var list = e.currentLnglat;
                        var s = JSON.stringify(list);
                        localStorage.setItem('list', s);
                        _this.lnglat = JSON.parse(s);
                        _this.dialog = true;
                    }
                }
            });
        },
        // 全景图
        panoramagram() {
            var obj = document.getElementById('seven');
            obj.style.color = '#409EFF';
            var obj = document.getElementById('one');
            obj.style.color = 'black';
            var obj = document.getElementById('two');
            obj.style.color = 'black';
            var obj = document.getElementById('three');
            obj.style.color = 'black';
            var obj = document.getElementById('four');
            obj.style.color = 'black';
            var obj = document.getElementById('five');
            obj.style.color = 'black';
            var obj = document.getElementById('six');
            obj.style.color = 'black';

            this.ruleForm.type = 5;
            this.ruleForm.pid = this.baseList[0].id;
            var _this = this;
            this.markerTool.open();
            this.polygonTool.close();
            this.markerTool.addEventListener('mouseup', function get(e) {
                // console.log(e)
                // var list = e.currentLnglat
                // var s = JSON.stringify(list)
                // localStorage.setItem("list",s)
                // _this.dialog = true
                let dian = e.currentLnglat;
                let Message = new ElMessage();
                if (_this.pddm(dian, _this.jdzb) == false) {
                    _this.markerTool.clear();
                    var obj = document.getElementById('seven');
                    obj.style.color = 'black';
                    // _this.$notify({
                    // 	title: '提示',
                    // 	message: '新增仓库必须在基地内',
                    // 	type: 'info',
                    // 	duration:1000
                    // });
                    Message.info('新增全景图必须在基地内');
                } else {
                    var qxflag = false;
                    for (var i = 0; i < _this.dkzb.length; i++) {
                        // console.log(_this.pddm(dian,_this.dkzb[i]),'每次新增点判定结果，false为在现有地块外')
                        if (_this.pddm(dian, _this.dkzb[i])) {
                            qxflag = true;
                        }
                    }
                    if (qxflag === false) {
                        _this.markerTool.clear();
                        var obj = document.getElementById('seven');
                        obj.style.color = 'black';
                        // _this.$notify({
                        // 	title: '提示',
                        // 	message: '新增仓库不能与已有地块重叠',
                        // 	type: 'info',
                        // 	duration:1000
                        // });
                        Message.info('新增全景图必须在地块、仓库或建筑上');
                    } else {
                        var list = e.currentLnglat;
                        var s = JSON.stringify(list);
                        localStorage.setItem('list', s);
                        _this.lnglat = JSON.parse(s);
                        _this.dialog = true;
                    }
                }
            });
        },
        // 基地
        dialog111() {
            // mouseout()
            if (this.baseList.length > 0) {
                this.$notify({
                    title: '提示',
                    message: '只能创建一个基地',
                    type: 'info',
                    duration: 1000
                });
            } else {
                this.ruleForm = {};
                var obj = document.getElementById('one');
                obj.style.color = '#409EFF';

                var obj = document.getElementById('two');
                obj.style.color = 'black';
                var obj = document.getElementById('three');
                obj.style.color = 'black';
                var obj = document.getElementById('four');
                obj.style.color = 'black';
                var obj = document.getElementById('five');
                obj.style.color = 'black';
                var obj = document.getElementById('six');
                obj.style.color = 'black';
                var obj = document.getElementById('seven');
                obj.style.color = 'black';

                this.ruleForm.type = 1;
                var _this = this;
                // this.map.clearOverLays();
                this.polygonTool.open();
                this.markerTool.close();
                this.polygonTool.addEventListener('draw', function huoqu(e) {
                    // console.log(e.currentArea/1000/1000*1500)
                    var area = (e.currentArea / 1000 / 1000) * 1500;
                    _this.ruleForm.area = area.toFixed(2);
                    var list = e.currentLnglats;
                    var s = JSON.stringify(list);
                    localStorage.setItem('list', s);
                    _this.lnglat = JSON.parse(s);
                    _this.dialog = true;
                });
            }
        },
        addListRow() {
            this.lnglat.push({
                lng: '',
                lat: ''
            });
        },
        handleClose(done) {
            if (this.ruleForm.type == 6 || this.ruleForm.type == 7) {
                if (this.equipmentIds == '') {
                    this.$notify({
                        title: '提示',
                        message: '设备不能为空',
                        type: 'info',
                        duration: 1000
                    });
                    return false;
                } else {
                }
            }
            if (this.ruleForm.type == 1 || this.ruleForm.type == 2 || this.ruleForm.type == 3 || this.ruleForm.type == 4) {
                if (!this.ruleForm.name) {
                    this.$notify({
                        title: '提示',
                        message: '名称不能为空',
                        type: 'info',
                        duration: 1000
                    });
                    return;
                }
            }
            if (this.loading) {
                return;
            }

            this.$confirm('确定要提交表单吗？')
                .then((_) => {
                    var obj = document.getElementById('one');
                    obj.style.color = 'black';
                    var obj = document.getElementById('two');
                    obj.style.color = 'black';
                    var obj = document.getElementById('three');
                    obj.style.color = 'black';
                    var obj = document.getElementById('four');
                    obj.style.color = 'black';
                    var obj = document.getElementById('five');
                    obj.style.color = 'black';
                    var obj = document.getElementById('six');
                    obj.style.color = 'black';
                    var obj = document.getElementById('seven');
                    obj.style.color = 'black';
                    this.loading = true;
                    this.ruleForm.diaphaneity = this.ruleForm.diaphaneity;
                    // this.ruleForm.coordinate = localStorage.getItem("list")
                    this.ruleForm.coordinate = JSON.stringify(this.lnglat);
                    var cangwei = [];
                    for (var b in this.position) {
                        cangwei.push(this.position[b].name);
                    }
                    var abcd = JSON.stringify(cangwei);
                    abcd = abcd.substr(1);
                    abcd = abcd.substr(0, abcd.length - 1);
                    if (this.ruleForm.type == 3) {
                        this.ruleForm.warehouseParts = cangwei;
                    }

                    let formdata = new FormData();
                    var xjzb = JSON.parse(this.ruleForm.coordinate);

                    for (var a in this.ruleForm) {
                        if (this.ruleForm[a] == null || this.ruleForm[a] == 'null') {
                            this.ruleForm[a] = '';
                            formdata.append(a, '');
                        } else {
                            formdata.append(a, this.ruleForm[a]);
                        }
                    }
                    if (this.ruleForm.type == 6) {
                        // var equipments = [];
                        // var coor = localStorage.getItem('list');
                        // console.log(this.equipmentIds);
                        // equipments.push({
                        //     id: this.equipmentIds.id,
                        //     name: this.equipmentIds.name,
                        //     coordinate: this.ruleForm.coordinate,
                        //     equType: this.ruleForm.type
                        // });
                        // let data = {
                        // 	type:"气象传感",
                        // 	equipments:equipments,
                        // 	soilId:""
                        // }
                        // console.log(data)
                        map_save(formdata).then((res) => {
                            this.$notify({
                                title: '提示',
                                message: '保存成功',
                                type: 'success',
                                duration: 1000
                            });
                            this.reload();
                        });
                    } else if (this.ruleForm.type == 7) {
                        // let data = {
                        // 	type:"摄像头",
                        // }
						// var equipments = [];
                        // // var coor = localStorage.getItem('list');
                        // console.log(this.equipmentIds,'摄像头');
                        // console.log(this.ruleForm,'摄像头');
						// equipments.push({
                        //     id: this.equipmentIds.id,
                        //     name: this.equipmentIds.name,
                        //     coordinate: this.ruleForm.coordinate,
                        //     equType: this.ruleForm.type
                        // });
						// // coordinate
						// // id
						// // equType
						// // name
                        map_save(formdata).then((res) => {
                            this.$notify({
                                title: '提示',
                                message: '保存成功',
                                type: 'success',
                                duration: 1000
                            });
                            this.reload();
                        });
                    } else {
                        // this.polygonTool.getPolygons();
                        // console.log(this.polygon.getPolygons(),'1212121212121212')
                        // console.log(_this.polygon.getLngLats(),'15151515')
                        map_save(formdata).then((res) => {
                            this.$notify({
                                title: '提示',
                                message: '保存成功',
                                type: 'success',
                                duration: 1000
                            });
                            this.reload();
                        });
                    }
                    this.timer = setTimeout(() => {
                        done();
                        // 动画关闭需要一定的时间
                        setTimeout(() => {
                            this.loading = false;
                        }, 400);
                    }, 2000);
                })
                .catch((_) => {});
        },
        //表单取消
        cancelForm() {
            // console.log(this.ruleForm)
            this.ruleForm = {
                type: '',
                color: '#409EFF',
                diaphaneity: 60
            };

            // this.$set(this.ruleForm,type,"")
            var obj = document.getElementById('one');
            obj.style.color = 'black';
            var obj = document.getElementById('two');
            obj.style.color = 'black';
            var obj = document.getElementById('three');
            obj.style.color = 'black';
            var obj = document.getElementById('four');
            obj.style.color = 'black';
            var obj = document.getElementById('five');
            obj.style.color = 'black';
            var obj = document.getElementById('six');
            obj.style.color = 'black';
            var obj = document.getElementById('seven');
            obj.style.color = 'black';
            this.loading = false;
            this.dialog = false;
            clearTimeout(this.timer);
            this.markerTool.clear();
        },
        getshuju() {
            map_findByList('').then((res) => {
                this.mapList = res;
                warehouse_tree('').then((ress) => {
					this.cangweiData = ress
                    if (this.mapList.length > 0) {

						for(let l = 0;l<this.mapList.length;l++){
							for(let u = 0;u<this.cangweiData.length;u++){
								if(this.mapList[l].id == this.cangweiData[u].id){
									this.mapList[l] = this.cangweiData[u]
								}
							}
						}
                        // this.jdzb = JSON.parse(res[1].coordinate)
						// console.log((res[0]))
                        var coorlist = JSON.parse(res[0].coordinate);
                        var arr = [];
                        for (var j = 0; j < coorlist.length; j++) {
                            var s = coorlist[j];
                            arr.push(new T.LngLat(parseFloat(s.lng), parseFloat(s.lat)));
                        }
                        this.urllist = arr;

                        for (let i = 0; i < this.mapList.length; i++) {
                            this.mapList[i].isEditable = false;
                            if (this.mapList[i].type == 1) {
                                this.baseList.push(this.mapList[i]);
                                this.jdzb = JSON.parse(this.mapList[i].coordinate);
                            }
                            if (this.mapList[i].type == 2 || this.mapList[i].type == 3 || this.mapList[i].type == 4) {
                                this.dkzb.push(JSON.parse(this.mapList[i].coordinate));
                            }
                            var list = [];
                            var newList = [];
							// console.log(this.mapList)
							if(this.mapList.length > 0) {
								var list = this.mapList[0].coordinate.split(';');
								// console.log(list)

								for (var j = 0; j < list.length; j++) {
									newList = JSON.parse(list[j]);
									this.longtitude = parseFloat(newList[0].lng);
									this.latitude = parseFloat(newList[0].lat);
								}
							}

                        }
                        this.getmap();
                    } else {
						if (
						    this.longtitude == '' ||
						    this.longtitude == null ||
						    this.longtitude == undefined ||
						    this.longtitude == 'null'
						) {

						    var cityCoordinate = JSON.parse(localStorage.getItem('cityCoordinate'));
						    this.longtitude = cityCoordinate.lng;
						    this.latitude = cityCoordinate.lat;
						}

                        this.getmap();
                    }
                });
            });
        },
        getmap() {
            BaiduMap.init().then((T) => {
                this.T = T;
                this.zoom = 12;
                this.map = new T.Map('mapDiv'); // 初始化地图对象
                // console.log(cityCoordinate,'1414')

                this.map.centerAndZoom(new T.LngLat(this.longtitude, this.latitude), 12); // 设置显示地图的中心点和级别
                this.map.disableDoubleClickZoom();
                //创建对象
                // var ctrl = new T.Control.MapType();
                //添加控件
                this.map.addControl(TMAP_HYBRID_MAP);
                // 创建图片对象

                var config = {
                    strokeColor: 'blue', //折线颜色  s
                    fillColor: 'blue', //填充颜色。当参数为空时，折线覆盖物将没有填充效果
                    strokeWeight: '3px', //折线的宽度，以像素为单位
                    strokeOpacity: 0.5, //折线的透明度，取值范围0 - 1
                    fillOpacity: 0.5, //填充的透明度，取值范围0 - 1
                    showLabel: false //是否显示面积，默认为false
                };
                this.markerTool = new T.MarkTool(this.map);
                this.polygonTool = new T.PolygonTool(this.map, config);
                this.geocoder = new T.Geocoder(this.map);

                //注册测面工具绘制完成后的事件
                // this.map.addOverLay(this.marker)// type  undefined
                for (let k = 0; k < this.mapList.length; k++) {
                    // console.log(111)
                    if (this.mapList[k].type == 1 || this.mapList[k].type == 2 || this.mapList[k].type == 3 || this.mapList[k].type == 4) {
                        let con = JSON.parse(this.mapList[k].coordinate);
                        // console.log(con)

                        this.polygon = new T.Polygon(con, {
                            color: this.mapList[k].color,
                            fillOpacity: this.mapList[k].diaphaneity / 100,
                            details: this.mapList[k]
                        });
                        // console.log(this.polygon)
                        this.map.addOverLay(this.polygon);
                        // var name = this.mapList[k]
                        // var _this = this
                        var name = this.mapList[k];
                        var _this = this;
                        this.polygon.addEventListener('click', function huoqu(e) {
                            var _this = this;
                            _this.details = e.target.options.details;
                        });
                        this.polygon.addEventListener('dblclick', function handleEdit(e) {
                            console.log(e);
							if(e.target.details.cw){
								_this.position = e.target.details.cw;
							}
                            // _this.map.disableEdit()
                            var qcfgw = _this.map.getOverlays();
                            // qcfgw.disableEdit()
                            for (var i = 0; i < qcfgw.length; i++) {
                                if (qcfgw[i].F == e.target.F) {
                                    // _this.polygon.disableEdit()
                                    // _this.map.removeOverLay(qcfgw[i])
                                    // var polygonss = new T.Polygon(JSON.parse(e.target.options.details.coordinate), { color: e.target.options.color,fillOpacity:e.target.options.fillOpacity,details:e.target.options.details })
                                    // _this.map.addOverLay(polygonss)
                                    // polygonss.enableEdit()
                                    // _this.polygon.enableEdit()
                                }
                            }
                            var bjzb = JSON.parse(e.target.options.details.coordinate);

                            _this.ruleForm = e.target.options.details;
                            _this.lnglat = bjzb;
                            _this.peasantId = _this.ruleForm.peasantName;
                            _this.principalId = _this.ruleForm.principalName;
                            localStorage.setItem('list', _this.ruleForm.coordinate);
                            _this.ruleForm.diaphaneity = Number(_this.ruleForm.diaphaneity);
                            _this.dialog = true;

                            // warehouse_listpart(e.target.options.details.id).then((res) => {
                            //     console.log(res);
                            //     _this.position = res.data;
                            // });

                            // e.target.options.details.ifshow = true
                            // _this.polygon.enableEdit()
                            // console.log(_this.polygon.isEditable())
                        });
                    }
                    //全景图

                    if (this.mapList[k].type == 5) {
                        var con = JSON.parse(this.mapList[k].coordinate);
                        var icon = new T.Icon({
                            // iconUrl: 'http://39.96.59.234:8884/re/b.png',
                            iconUrl: 'https://grove.cpzsyun.com:81/re/b.png',
                            iconSize: new T.Point(19, 27),
                            iconAnchor: new T.Point(10, 25)
                        });
                        this.marker = new T.Marker(con, { icon: icon, details: this.mapList[k] });
                        this.map.addOverLay(this.marker);
                        let _this = this;
                        this.marker.addEventListener('click', function huoqu(e) {
                            // _this.ruleForm = e.target.options.details
                            // _this.dialog = true
                            // console.log(111)
                            _this.dialogTableVisible = true;
                            _this.imgurl = _this.$store.state.plantImg + e.target.options.details.soilImg;
                            // console.log(_this.dialogTableVisible)
                        });
                        this.marker.addEventListener('dblclick', function huoqu(e) {
                            _this.ruleForm = e.target.options.details;
                            _this.dialog = true;
                        });
                    }
                    //摄像头
                    if (this.mapList[k].type == 7) {
                        var con = JSON.parse(this.mapList[k].coordinate);
                        var icon = new T.Icon({
                            // iconUrl: 'http://39.96.59.234:8884/re/c.png',
                            iconUrl: 'https://grove.cpzsyun.com:81/re/c.png',
                            iconSize: new T.Point(19, 27),
                            iconAnchor: new T.Point(10, 25)
                        });
                        this.marker = new T.Marker(con, { icon: icon, details: this.mapList[k] });
                        this.map.addOverLay(this.marker);
                        let _this = this;
                        this.marker.addEventListener('click', function huoqu(e) {
                            // _this.ruleForm = e.target.options.details
                            // _this.dialog = true
                            // console.log(111)
                            //  _this.dialogTableVisible = true
                            //  _this.imgurl = _this.$store.state.imageUrls +  e.target.options.details.soilImg
                            // console.log(_this.dialogTableVisible)
                        });
                        this.marker.addEventListener('dblclick', function huoqu(e) {
                            _this.ruleForm = e.target.options.details;
                            // _this.dialog = true;
							var id = "4028f5a178ce095b0178ce1e05b700bd"
							axios.get("http://grove.cpzsyun.com:81/api/plant/dockDevice/getUrl?baseSoilId=" + id).then((res) =>{
								console.log(res)
							})
                        });
                    }
                    //气象传感
                    if (this.mapList[k].type == 6) {
                        var con = JSON.parse(this.mapList[k].coordinate);
                        var icon = new T.Icon({
                            // iconUrl: 'http://39.96.59.234:8884/re/a.png',
                            iconUrl: 'https://grove.cpzsyun.com:81/re/a.png',
                            iconSize: new T.Point(19, 27),
                            iconAnchor: new T.Point(10, 25)
                        });
                        this.marker = new T.Marker(con, { icon: icon, details: this.mapList[k] });
                        this.map.addOverLay(this.marker);
                        let _this = this;
                        this.marker.addEventListener('click', function huoqu(e) {
                            // _this.ruleForm = e.target.options.details
                            // _this.dialog = true
                            // console.log(111)
                            //  _this.dialogTableVisible = true
                            //  _this.imgurl = _this.$store.state.imageUrls +  e.target.options.details.soilImg
                            // console.log(_this.dialogTableVisible)
                        });
                        this.marker.addEventListener('dblclick', function huoqu(e) {
							console.log(e)
                            _this.ruleForm = e.target.options.details;
							_this.equipmentIds = e.target.options.details.principalName
                            _this.dialog = true;
                        });
                    }

                    //启用线编辑功能
                    // this.polygon.enableEdit()
                }
                if (this.type != undefined && this.type != null && this.type != '') {
                    if (this.type == 2) {
                        this.farmarea();
                    }
                    if (this.type == 3) {
                        this.warehouse();
                    }
                    if (this.type == 4) {
                        this.architecture();
                    }
                }
            });
        },
        // huoqu(e){
        // 	console.log(e)
        // },
        handleAdd1() {
            var that = this;
            this.modal1 = true;
            this.formData1.type = '0';
            this.typeShow = true;
            this.map.clearOverLays();
            this.polygonTool.open();
            this.polygonTool.addEventListener('draw', function huoqu(e) {
                var list = e.currentLnglats;
                var s = JSON.stringify(list);
                localStorage.setItem('list', s);
                that.mas = JSON.parse(s);
            });
            this.getmas();
        },
        sousuo() {
            var _this = this;
            this.geocoder.getPoint(this.addressname, function searchResult(result) {
                if (result.getStatus() == 0) {
                    this.zhongxin = result.getLocationPoint();
                    this.marker = new T.Marker(result.getLocationPoint());
                    _this.lnt = result.getLocationPoint().lng;
                    _this.lat = result.getLocationPoint().lat;
                    _this.panto();
                } else {
                    alert(result.getMsg());
                }
            });
        },
        panto() {
            this.map.panTo(new T.LngLat(this.lnt, this.lat), 18);
        }
    }
};
</script>

<style scoped lang="less">
.qjt {
    position: absolute;
    top: 100px;
    left: 200px;
    background: white;
}
.el-scrollbar__wrap {
    overflow-x: hidden;
}
.mapDiv {
    width: 100%;
    height: 85vh;
    z-index: 0;
}
.zoology {
    width: 100px;
    text-align: center;
    height: 60px;
    line-height: 30px;
    position: absolute;
    top: 20px;
    left: 40px;
    z-index: 100;
    background: white;
    border-radius: 6px;
}
.zoology1 {
    width: 200px;
    text-align: center;
    height: 60px;
    line-height: 30px;
    position: absolute;
    top: 20px;
    left: 150px;
    z-index: 100;
    background: white;
    border-radius: 6px;
}
.zoology2 {
    width: 300px;
    text-align: center;
    height: 60px;
    line-height: 30px;
    position: absolute;
    top: 20px;
    left: 360px;
    z-index: 100;
    background: white;
    border-radius: 6px;
}
.stbh {
    position: relative;
}
.margin-left {
    margin-left: 20px;
}
.address {
    width: 200px;
    text-align: center;
    height: 60px;
    position: absolute;
    top: 20px;
    left: 670px;
    z-index: 100;
    background: white;
    border-radius: 6px;
}
.addressinput {
    width: 150px;
    height: 57px;
}
.addressspan {
    font-size: 14px;
}
.lu {
    width: 8px;
    height: 16px;
    background: greenyellow;
    margin-left: 10px;
}
.hnk {
    display: inline-block;
}
.jgxx {
    margin-left: 10px;
    font-weight: 600;
    font-size: 15px;
}
/* .el-drawer.rtl{
    overflow: scroll;
} */
// .demo-drawer__content{
// 	display: flex;
// 	flex-direction: column;
// 	padding:20px;
// 	height:100%;
// 	.el-form{
// 		flex:1;
// 		height:0;
// 		overflow: auto;
// 	}
// 	.drawer-footer{
// 		display:flex;
// 		.el-button{
// 			flex:1;
// 		}
// 	}
// }
.el-drawer__body {
    // height:0;
    overflow: auto;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    width: 180px;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.el-upload--text {
    width: 180px;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
